<!DOCTYPE html>
<html>
<head>
	<title>Vue的基本使用</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style type="text/css">
		.redbg{background: red}
		.greenbg{background: green}
	</style>
</head>
<body>
	<div id="div-1">
		{{message}}
		<p>{{student.name}}</p>
		<p>{{student.age}}</p>
		<p>{{student.address}}</p>
		<table border="1">
			<tr><th>姓名</th><th>年龄</th><th>地址</th></tr>
			<!-- 使用v-for循环生成tr -->
			<!-- 使用v-bind绑定属性 -->
			<!-- 使用v-on绑定事件-->
			<tr v-for="stu in students" v-bind:class="stu.age%2==0?'redbg':'greenbg'" v-on:click="sayHi(stu.name)">
				<td>{{stu.name}}</td>
				<td>{{stu.age}}</td>
				<td>{{stu.address}}</td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		//创建Vue对象（页面只能有一个）
		var vue = new Vue({
			//el属性用于绑定页面标签
			el:"#div-1",
			//data属性实现数据的绑定
			data:{
				message:"Hello World!!!",
				student:{name:"张三",age:"20",address:"武汉"},
				//学生数组
				students:[{name:"王五",age:21,address:"上海"},
							{name:"周六",age:22,address:"上海"},
							{name:"刘七",age:23,address:"上海"}]

			},
			//methods属性定义事件函数
			methods:{
				sayHi:function(name){
					alert("Hi!!!! "+name);
				}
			}
		});
		vue.message = "haha";
		vue.student.age = 33;
	</script>
</body>
</html>